<template>
	<Echart :options="options" />
</template>

<script>
import geoCoordMap from './geoCoordMap.js';
import img from '@/assets/images/v_layout.png';
import Echart from '../../components/echart';

// 1->运行中；2->警报中；3->急停；4->离线
const _colors = {
    0: '#000',
    1: '#07f7a8',
    2: '#f2d400',
    3: '#EE6666',
    4: '#dcdcdc',
};

const _geoCoordMap = geoCoordMap.map(s => ({ name: s.name, value: s.value, state: 1 }));
_geoCoordMap.push({ name: '_', value: [100.0, 100.0], state: 0 }); // 设置画布，100*100

export default {
    components: {
        Echart,
    },
    props: {
        cdata: { type: Array, default: () => [] },
    },
    data() {
        return {
            options: {},
        };
    },
    watch: {
        cdata: {
            handler(newData) {
                newData.forEach(e => {
                    const item = _geoCoordMap.find(s => s.name === e.name);
                    if (item) {
                        item.state = e.state;
                    }
                });

                this.setOption();
            }
        }
    },
    mounted() {
        this.setOption();
    },
    methods: {
        setOption() {
            this.options = {
                xAxis: {
                    show: false,
                },
                yAxis: {
                    show: false,
                },
                series: [
                    {
                        symbolSize: 18,
                        data: _geoCoordMap,
                        type: 'effectScatter',
                        coordinateSystem: 'cartesian2d',
                        itemStyle: {
                            color: function (params) {
                                return _colors[params.data.state] ?? '#000';
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.data.name !== '_' ? params.data.name : '';
                            },
                            color: 'blue',
                        }
                    },
                ],
                graphic: [
                    {
                        type: 'image', // 图形元素类型
                        bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                        style: {
                            image: img,
                            width: 930,
                            height: 420,
                        }
                    }
                ]
            };
        }
    }
}
</script>
